<template>
    <!-- 招聘的记录 -->
    <div>
        <div class="search-container">
            <span class="search-label">公司：</span>
            <el-input v-model="companyName" placeholder="搜索公司" class="search-input"></el-input>

            <span class="search-label">时间范围：</span>
            <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="YYYY-MM-DD">
            </el-date-picker>

            <span class="search-label">状态：</span>
            <!-- 搜索下拉框：value改为数字（匹配后端参数），label显示文字 -->
            <el-select v-model="status" placeholder="请选择状态" class="search-select">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>

            <el-button type="primary" class="search-button" @click="handleSearch">查询</el-button>
            <el-button type="success" class="search-button" @click="handleReset">重置</el-button>
        </div>

        <el-table :data="tableData" border style="width: 100%; margin-top: 15px;"
            :header-cell-style="{ textAlign: 'center', background: '#f5f7fa', fontWeight: 'bold' }"
            :cell-style="{ textAlign: 'center' }">

            <el-table-column prop="companyName" label="公司名称" width="150"></el-table-column>
            <el-table-column prop="hrName" label="HR姓名" width="120"></el-table-column>
            <el-table-column prop="recruitName" label="职位名称" width="150"></el-table-column>
            <el-table-column prop="recruitDetail" label="职位简介" width="200"
                :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="skillRequest" label="技能要求" width="200"
                :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="startSalary" label="起始薪资" width="120"></el-table-column>
            <el-table-column prop="maxSalary" label="最高薪资" width="120"></el-table-column>
            <el-table-column prop="payMethod" label="结算方式" width="120">
                <template slot-scope="scope">
                    <!-- 直接在模板里判断：0=日结，1=周结... -->
                    {{
                        scope.row.payMethod === 0 ? '日结' :
                            scope.row.payMethod === 1 ? '周结' :
                                scope.row.payMethod === 2 ? '月结' :
                                    scope.row.payMethod === 3 ? '小时工' :
                                        scope.row.payMethod === 4 ? '面议' : '未知方式'
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="welfareInfo" label="福利待遇" width="200"
                :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="recruitDetail" label="工作职责" width="250" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="createTime" label="发布时间" width="150"></el-table-column>
            
            <!-- 合并状态列和操作列 -->
            <el-table-column label="状态/操作" width="250" fixed="right">
                <template slot-scope="scope">
                    <!-- 判断状态是否为未审核(0) -->
                    <template v-if="scope.row.status === 0">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                        <div style="margin-top: 5px;">
                            <!-- 通过按钮：绿色成功样式 -->
                            <el-button 
                                type="success" 
                                size="mini" 
                                style="margin-right: 8px;"
                                @click="handleApprove(scope.row)"
                            >
                                通过
                            </el-button>
                            <!-- 不通过按钮：红色危险样式 -->
                            <el-button 
                                type="danger" 
                                size="mini"
                                @click="handleReject(scope.row)"
                            >
                                不通过
                            </el-button>
                        </div>
                    </template>
                    
                    <!-- 已通过或未通过状态 -->
                    <template v-else>
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000"></el-pagination>
    </div>
</template>

<script>
import { selectAllAuditRecord } from "@/api/auditRecord";
export default {
    created() {
        this.loadData({});
    },
    methods: {
        // 加载数据方法
        async loadData(params) {
            try {
                const response = await selectAllAuditRecord(params);
                console.log(response);
                this.tableData = response.data || [];
            } catch (error) {
                console.error("数据加载失败:", error);
                this.$message.error("加载数据失败，请稍后重试");
            }
        },

        // 查询按钮点击事件
        handleSearch() {
            // 收集查询条件
            const params = {
                companyName: this.companyName,
                createTime: this.createTime,
                status: this.status,
                startTime: this.startTime,
                endTime: this.endTime,
            };
            // 调用加载数据方法并传入条件
            this.loadData(params);
        },

        // 重置按钮逻辑
        handleReset() {
            // 清空所有搜索输入框数据
            this.companyName = '';
            this.time = [];
            this.status = '';
            this.startTime = null;
            this.endTime = null;
            this.createTime = '';

            // 不带任何查询条件重新加载所有数据
            this.loadData({});
        },

        // 数字状态转文字
        getStatusText(status) {
            const statusTextMap = {
                0: '待审核',
                1: '通过',
                2: '未通过'
            };
            return statusTextMap[status] || '未知状态';
        },

        // 根据数字状态匹配标签类型
        getStatusType(status) {
            const statusTypeMap = {
                0: 'info',    // 待审核 → 蓝色 info
                1: 'success', // 通过 → 绿色 success
                2: 'danger'   // 未通过 → 红色 danger
            };
            return statusTypeMap[status] || 'info';
        },
        
        // 处理通过操作
        handleApprove(row) {
            // 这里添加通过审核的逻辑
            console.log('通过审核:', row);
            // 实际应用中可能会调用API更新状态
            // this.updateStatus(row.id, 1);
        },
        
        // 处理未通过操作
        handleReject(row) {
            // 这里添加未通过审核的逻辑
            console.log('未通过审核:', row);
            // 实际应用中可能会调用API更新状态
            // this.updateStatus(row.id, 2);
        }
    },
    watch: {
        // 监听时间范围变化，自动拆分到 startDate 和 endDate
        time(newVal) {
            if (newVal && newVal.length === 2) {
                this.startTime = newVal[0];
                this.endTime = newVal[1];
            } else {
                this.startTime = null;
                this.endTime = null;
            }
        }
    },
    data() {
        return {
            companyName: '',          // 搜索：公司名称
            time: [],                 // 搜索：时间范围（daterange默认数组）
            status: '',               // 搜索：状态（值为数字0/1/2）
            tableData: [],            // 表格数据源
            createTime: '',           // 创建时间（搜索用）
            startTime: null,          // 时间范围-开始时间
            endTime: null,            // 时间范围-结束时间
            options: [                // 状态下拉框选项
                { value: 0, label: '待审核' },
                { value: 1, label: '通过' },
                { value: 2, label: '未通过' }
            ]
        };
    }
};
</script>

<style scoped>
/* 原有样式不变，保留即可 */
.search-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

.search-label {
    white-space: nowrap;
    font-size: 14px;
    color: #606266;
}

.search-input {
    width: 150px;
}

.el-table .el-tag {
    padding: 0 12px;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
    min-width: 60px;
    text-align: center;
}

.search-select {
    width: 200px;
    margin-left: 10px;
}

.search-button {
    margin-left: 10px;
}

.el-table th {
    height: 70px !important;
    line-height: 70px !important;
    background-color: #f5f7fa !important;
}

.el-table {
    margin-top: 15px;
    font-size: 14px;
}

.el-table__body-wrapper {
    overflow-x: auto;
}

.pagination-left {
    margin-top: 10px;
    text-align: left;
}

@media screen and (max-width: 1600px) {
    .el-table {
        font-size: 13px;
    }
}
</style>
